<template>
  <!-- @vue-ignore -->
  <el-popover
    :popper-class="popperClass"
    :virtual-ref="props.virtualRef"
    virtual-triggering
    :offset="5"
    :trigger="trigger"
    :placement="placement"
    :show-arrow="false"
    :persistent="false"
    width="auto">
    <template v-if="props.tooltip">
      <span class="ml-popper-span">{{ props.tooltip }}</span>
    </template>
    <template v-else>
      <slot />
    </template>
  </el-popover>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'MlPopover',
})
import { _window } from '@/global'
import { computed } from 'vue'
import { type Placement } from 'element-plus'
const props = withDefaults(
  defineProps<{
    virtualRef: HTMLElement
    popperClass?: string | string[] | undefined | null
    tooltip?: string
    trigger?: 'click' | 'focus' | 'hover' | 'contextmenu'
    placement?: Placement
  }>(),
  {
    tooltip: '',
    trigger: 'hover',
    placement: 'bottom-start',
  }, // 默认值
)
const popperClass = computed(() => {
  return [
    'ml-popper',
    ...(props.popperClass
      ? typeof props.popperClass === 'string'
        ? [props.popperClass]
        : props.popperClass
      : []),
  ].join(' ')
})
const trigger = computed(() => {
  return _window.isMobile ? 'click' : props.trigger
})
</script>
<style lang="scss">
.ml-popper {
  border-radius: 10px !important;
  padding: 5px 10px !important;
  min-width: auto !important;
  &:has(.ml-popper-span) {
    border-radius: 25px !important;
  }
  &-span {
    white-space: nowrap;
  }
}
</style>
